<template>
	<div class="contact-item" :border="false" :round="false" >
		<div class="avatar">

			<img class="avatar-img" :src="contact.avatar" alt="" @click="previewImage(contact.avatar)">
			<div class="online-status" v-if="contact.online"></div>
		</div>

		<div class="contact-info" @click= "forwardRoute(contact)">
			<div class="contact-name">
				<!-- 群聊标签 -->
				<span class="group-tag" v-if="contact.is_group == 1">群聊</span>
				{{ contact.displayName }}
				<span class="badge" v-if="contact.unread > 0">{{ contact.unread }}</span>
			</div>
			<div class="last-message">

				{{ contact.lastContent }}
			</div>
		</div>

		<div class="time">{{ contact.lastSendTime }}</div>
	</div>
</template>

<script>
import { postAction } from '@/api'
	export default {
		name: 'ContactItem',
		props: {
			contact: {
				type: Object,
				required: false
			}
		},
		methods: {
			forwardRoute(contact){
        //跳转之前查是否是个人机器人
				//如果是个人机器人
        postAction("/sys/chat/bot/selectkey",{id:contact.goalId}).then(res=>{
          if(res.result){
            this.$router.push(`/coordination/chat/bot/${contact.goalId}`)
          }else {
            this.$router.push(`/coordination/chat/${contact.goalId}`)
          }
        })
        // this.$router.push(`/coordination/chat/${contact.goalId}`)
			},
			previewImage(imageUrl) {
				this.$emit('click-preview',imageUrl)
			},
		},
	}
</script>

<style>
	.contact-item {
		display: flex;
		align-items: center;
		padding: 12px 16px;
		position: relative;
		background: #fff;
		border-bottom: 1px solid #f0f0f0;
	}

	.avatar {
		position: relative;
		width: 48px;
		height: 48px;
		border-radius: 20%;
		overflow: hidden;
		margin-right: 12px;
		flex-shrink: 0;
	}

	.avatar-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		background-color: #fff;
	}

	.online-status {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: #4CAF50;
		border: 2px solid white;
	}

	.contact-info {
		flex: 1;
		min-width: 0;
	}

	.contact-name {
		font-size: 16px;
		font-weight: 500;
		margin-bottom: 4px;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	/* 群聊标签样式 */
	.group-tag {
		background: linear-gradient(90deg, #26B1A1, #6FD0B3);
		color: white;
		font-size: 12px;
		padding: 2px 6px;
		border-radius: 10px;
		margin-right: 4px;
	}

	.contact-name .badge {
		background-color: #ff3b30;
		color: white;
		font-size: 12px;
		padding: 1px 6px;
		border-radius: 10px;
		margin-left: 8px;
		flex-shrink: 0;
	}

	.last-message {
		font-size: 14px;
		min-height: 19px;
		color: #888;
		display: flex;
		align-items: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
	}

	.last-message i {
		margin-right: 5px;
		color: #4b6cb7;
	}

	.time {
		font-size: 12px;
		color: #999;
		align-self: flex-start;
		margin-top: 4px;
		margin-left: 8px;
		flex-shrink: 0;
	}
</style>
